<template>
	<view>
		<view class="logo">
			<u--image width="80px" height="80px" :src="require('static/jqr-128.png')" shape="circle"></u--image>
		</view>
		<view class="login-main">
			<u--form labelPosition="left" :model="user" :rules="rules" ref="form1">
				<u-form-item prop="userName" borderBottom>
					<u--input v-model="user.userName" placeholder="请输入账号" border="none" prefixIcon="account"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item prop="password" borderBottom>
					<u--input placeholder="请输入密码" type="password" border="none" v-model="user.password"
						prefixIcon="lock" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item prop="repassword" borderBottom>
					<u--input placeholder="请确认密码" type="password" border="none" v-model="user.repassword"
						prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item borderBottom>
					<u-row justify="between">
						<u-col :span="span8">
							<u-form-item prop="verifyCode">
								<u--input placeholder="请输入验证码" border="none" v-model="user.verifyCode" prefixIcon="grid"
									prefixIconStyle="font-size: 22px;color: #909399"></u--input>
							</u-form-item>
						</u-col>
						<u-col :span="span4">
							<view class="code-img-wrapper" @click="updateImageCode">
								<canvas  style="width100%;height:60rpx;" canvas-id="canvas"></canvas>
							</view>
						</u-col>
					</u-row>
				</u-form-item>
				<u-button @click="btnRegister">用户注册</u-button>
			</u--form>
		</view>
	</view>
</template>
<script>
	import {
		Mcaptcha
	} from '@/util/mcaptcha'
	export default {
		data() {
			return {
				span8: 8,
				span4:4,
				user: {
					userName: '',
					password: '',
					repassword: '',
					verifyCode:''
				},
				rules: {
					userName: [{
							required: true,
							message: '必填项',
							trigger: ['blur', 'change']
						},
						{
							min: 8,
							max: 32,
							message: '用户账号字符串长度在8到32之间'
						}
					],
					password: [{
							required: true,
							message: '必填项',
							trigger: ['blur', 'change']
						},
						{
							min: 8,
							message: '用户密码字符串长度最少8位',
							trigger: ['blur', 'change']
						}

					],
					repassword: [{
							required: true,
							message: '必填项',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								let password = this.user.password;
								if (value === password) {
									return true
								} else {
									return false
								}
							},
							message: '用户密码和确认密码不一致',
							trigger: ['blur', 'change']

						}

					],
					verifyCode: [{
						required: true,
						message: '必填项',
						trigger: ['blur', 'change']
					}, ]

				}
			}
		},
		onReady() {
			this.mcaptcha = new Mcaptcha({
				el: 'canvas',
				width: 100,
				height: 30,
				createCodeImg: ""
			});
		},
		methods: {
			updateImageCode() {
				this.mcaptcha.refresh()
			},
			async btnRegister() {
				//校验的验证 promise
				this.$refs.form1.validate().then(async res => {

					
					//密码是否一致
					//判断密码和确认密码一致
					if (this.user.password !== this.user.repassword) {
						uni.$u.toast('密码和确认密码不一致')
						return;
					}
					
					//验证码
					
					let validate = this.mcaptcha.validate(this.user.verifyCode)
					if (!validate) {
						return uni.showToast({
							title: '图形验证码错误'
						})
					} 
					//实现注册
					//async await
					//前期配置
					//common/config.js baseUrl
					//util/responseInterceptors.js 
					//http请求的使用
					
					let result = await uni.$u.http.post('api/userinfo/register', this.user)
					if (result.success) {
						uni.reLaunch({
							url: './login'
						})
					} else {
						uni.$u.toast(result.msg)
						return;
					}


				}).catch(errors => {
					uni.$u.toast('校验失败')
				})

			}
		}
	}
</script>

<style scoped>
	.logo {
		height: 180px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1px solid #C8C9CC;
	}
</style>
